<template>
	<div class="outter_div">
		<span class="title_span">图书管理</span>
		<div class="tabs_nav">
			<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" active-text-color="#3080FE" @select="handleSelect">
				<el-menu-item index="1">全部图书</el-menu-item>
				<el-menu-item index="2">借阅信息</el-menu-item>
			</el-menu>
			<all-books v-if="flag"></all-books>
			<borrow-info v-else></borrow-info>
		</div>
	</div>
</template>

<script>
	import allBooks from './all-books.vue';
	import borrowInfo from './borrow-info.vue';
	export default {
		data() {
			return {
				activeIndex: '1',
				flag: true
			}
		},
		methods: {
			handleSelect: function(key, keyPath) {
				console.log(key, keyPath);
				if (key == 1) this.flag = true;
				else this.flag = false;
			}
		},
		components: {
			allBooks,
			borrowInfo
		}
	}
</script>

<style>
	* {
		padding: 0;
		margin: 0;
	}

	.tabs_nav {
		margin-bottom: 25px;
	}
</style>
